 <!-- 心愿单详情 -->
<template>
    <view>
        <view v-if="!hasLogin">
            <empty></empty>
        </view>
        <view v-else>
            <view class="addTitle">
                <view class="titleDetail">
                    <view class="" style="text-align:left">
                        <image src="../../static/newh5/fanhui.png" class="yticon"
                            style="width: 13px;height: 20px;color:black" @click="returnIndex()"></image>
                    </view>
                    <view class="titleText" style="flex:1">
                        <b>创建心愿单</b>
                    </view>
                </view>
            </view>
            <scroll-view  class="list-scroll-content" scroll-y @scrolltolower="toBottom">
                <view class="main_box">
                <view>
                    <!-- 详细信息部分 -->
                    <view class="MT10 middle_box">
                        <text class="left_title_text">心愿单信息</text>
                    </view>
                    <view>
                        <u-form :model="editForm" ref="uForm" :rules="rules" :error-type="errorType"  >
                            <u-form-item label="*心愿单标题:" label-width="170" prop="title">
                                <u-input v-model="editForm.title" />
                            </u-form-item>
                            <u-form-item label="心愿单编号:" label-width="170" prop="sn">
                                <u-input v-model="editForm.sn" readOnly />
                            </u-form-item>
                            <u-form-item label="*预计采购时间:" label-width="200" prop="endTime">
                                <u-input v-model="editForm.endTime" @click="()=>{show = true}"  />
                                <!-- <u-picker mode="time" v-model="show" :params="params" @confirm="getSelectTime"></u-picker> -->
                                <u-calendar v-model="show"   :minDate="minDate" :maxDate="end_date"  ref="calendar"  mode="date" @change="getSelectTime"></u-calendar>
                            </u-form-item>
                            <u-form-item label="*联系人姓名:" label-width="170" prop="name" >
                                <u-input v-model="editForm.name"  />
                            </u-form-item>
                            <u-form-item label="*联系人电话:" label-width="170" prop="phone" >
                                <u-input v-model="editForm.phone"  />
                            </u-form-item>
                            <u-form-item label="是否公开:" label-width="160"  >
                                <u-radio-group v-model="editForm.isShow"  >
                                    <u-radio :key="1" :name="1">公开</u-radio>
                                    <u-radio :key="0" :name="0">不公开</u-radio>
                                </u-radio-group>
                            </u-form-item>
                            <view v-for="(item,index) in editForm.details">
                                <view class="MT10 middle_box">
                                    <text class="left_title_text">商品信息{{ index +1 }}</text>
                                    <view style="display: flex;">
                                        <view class="btnFrame btn" @click="addGoodFun">增加商品</view>
                                         <view class="btnFrame btn" @click="deleteCurrentGoods(index)" v-if="index != 0">删除</view>
                                    </view>
                                </view>
                                <u-form-item label="*商品名称:" label-width="160" prop="goodsName">
                                    <u-input v-model="item.goodsName"  />
                                </u-form-item>
                                <u-form-item label="商品说明:" label-width="160" prop="remark">
                                    <u-input v-model="item.remark"  />
                                </u-form-item>
                                <u-form-item label="所需数量:" label-width="160" prop="num">
                                    <u-input v-model="item.num"  />
                                </u-form-item>
                                <u-form-item label="参考链接:" label-width="160" prop="goodsUrl">
                                    <u-input v-model="item.goodsUrl"  />
                                </u-form-item>
                            </view>

                        </u-form>
                    </view>
                      

                </view>


            </view>
            </scroll-view>
            
        </view>
        <view class="fixed_box">
            <view class="uni-tip-group-button">
                <view class="btnFrame btn" @click="saveFun(0)">暂存</view>
                <view class="btnFrame btn" @click="saveFun(1)">保存并发布</view>
                <view class="btnFrame btn" @click="returnIndex()">关闭</view>
            </view>
        </view>
    </view>


</view></template>
  
<script>
import {
    getWishDetail,
    addWishList,
    getWishListSn
} from '../../api/wish/wish'
import { goback } from "@/common/utils/navigateBack.js";
import {
    mapState,

} from 'vuex';
export default {
    name: 'wishContent',
    props: [],

    components: {},
    data() {
        return {
            minDate:'',
            end_date:'2050-05-22',
            errorType: ['message'],
            params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
			},
            show: false,
            rules: {
				title: [
					{ 
						required: true, 
						message: '请输入心愿单标题', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur'
					}
				],
				endTime: [
					{
                        required: true, 
						message: '请选择预计采购时间', 
						trigger: 'change'
					}
				],
				name: [
					{
                        required: true, 
						message: '请输入联系人姓名', 
						trigger: 'blur'
					}
				],
				// goodsName: [
				// 	{
                //         required: true, 
				// 		message: '请输入商品名称', 
				// 		trigger: 'blur'
				// 	}
				// ],
			},
            currentId: '',
            editForm: {
                sn: '',
                isShow:0,
                endTime:'',
                title:'',
                details:[]
            },
            currentObj: {
                userCount: 0,
                limit: 100
            }
        };
    },

    filter: {},

    computed: {
        ...mapState(['hasLogin']),
        staceNum() {
            return (this.currentObj.userCount / this.currentObj.limit) * 100
        }
    },

    created() { },

    mounted() { },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
    onLoad() {
        this.initWishSn()
        this.editForm.details.push({
            goodsName:'',
            remark:'',
            num:1,
            goodsUrl:''
        })
        this.getInitTime()
    },
    watch: {},

    methods: {
        getInitTime(){
            let time = new Date()
            let year = time.getFullYear()
            let month = Number(time.getMonth()) + 1;
            let day = time.getDate()
            console.log('year',year);
            console.log('month',month);
            console.log('day',day);
            this.minDate = year+'-'+month+'-'+day
        },
        getSelectTime(){
            console.log('ar',arguments);
            const {year,month,day} = arguments[0]
            this.editForm.endTime = year +'-'+month + '-' + day + ' 00:00:00'
        },
        addGoodFun(){
            this.editForm.details.push({
                goodsName:'',
                remark:'',
                num:'',
                goodsUrl:'',
            })
        },
        deleteCurrentGoods(index){
            this.editForm.details.splice (index,1)
        },
        returnIndex() {
            goback()
        },
        initWishSn() {
            getWishListSn().then((res) => {
                console.log('res', res);
                if (res.code === 0) {
                    console.log('res', res.data);
                    this.editForm.sn = res.data
                } else {
                    this.$util.msg(res.message)
                }
            })

        },
        saveFun(type){
            console.log('xxx',this.editForm);
            
            this.$refs.uForm.validate(valid => {
				if (valid) {
                    if(this.editForm.details.some(i=>!i.goodsName)){
                        this.$util.msg('请完善商品名称信息')
                        return 
                    }
					console.log('验证通过');
                    this.postData(type)
				} else {
					console.log('验证失败');
				}
			});
            
            
        },
        postData(type){
            let params = {
                ...this.editForm,
                isSave:type,
            }
            addWishList(params).then((res) => {
                console.log('res', res);
                if (res.code === 0) {
                    console.log('res', res.data);
                    this.$util.msg('操作成功！')
                    setTimeout(()=>{
                        //跳转我的心愿单列表
                        // this.returnIndex()
                        uni.navigateTo({
                            url: `/pages/wishList/myWishList`
                        })
                    },300)
                } else {
                    this.$util.msg(res.message)
                }
            })
        },
        loadData() {
            let params = {
                id: this.currentId
            }
            getWishDetail(params).then((res) => {
                console.log('res', res);
                if (res.code === 0) {
                    console.log('res', res.data);
                    this.editForm.sn = res.data
                } else {
                    this.$util.msg(res.message)
                }
            })
        }
    }
}

</script>
<style lang='scss' scoped>
.main_box {
    padding: 10px;
}
.list-scroll-content {
    position: relative;
    // height: 100%;
    height: 800px;
    display: flex;
    // padding-top: 16rpx;
    // padding-bottom: env(safe-area-inset-bottom);
    flex-direction: column;
    flex-shrink: 0;
}
.fixed_box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130rpx;
}

.grey_text {
    color: #aaaaaa;
    font-size: 26rpx;
}

.MT10 {
    margin-top: 20rpx;
}

.middle_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left_title_text {
        font-size: 16px;
        font-weight: 500;
    }

    .right_title_text {
        font-size: 14px;
        color: #aaaaaa;
    }
}

.btn {
    line-height: 34px;
    height: 34px;
    width: 160rpx;
    border-radius: 26rpx;
    border: 2rpx solid #e4e7ed;
    font-size: 26rpx;
    text-align: center;
    color: #82848a;
}

.uni-tip-group-button {
    border-top: none;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20px;

    .uni-tip-button {
        border-top: 1px solid #e2e2e2;

        &.confirm {
            border-top: 1rpx solid $base-color;
            border-bottom: 1rpx solid $base-color;
            color: #fff;
            background-color: $base-color;
        }
    }
}

.status-one {
    width: 100%;
    border: 1px #e2e2e2 solid;
    // box-shadow: 0px 2px 2px #D0D4D6;
    height: 15px;
    border-radius: 10px;
    background: white; // 此时是最新的语法；
    padding: 1px;
    margin-bottom: 10px;

    .process-one {
        background: #e2e2e2;
        width: 10%;
        height: 100%;
        border-radius: 10px;
    }
}</style>